<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <el-form :inline="true" :model="searchMap.data" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="searchMap.data.orderTime"
          placeholder="下单时间"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="orderList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="orderId" label="订单编号" width="120">
      </el-table-column>
      <el-table-column prop="buyNum" label="购买数量"></el-table-column>
      <el-table-column prop="orderMoney" label="购买金额"></el-table-column>
      <el-table-column prop="orderPmoney" label="订单佣金"></el-table-column>
      <el-table-column prop="orderTime" label="下单时间"></el-table-column>
      <el-table-column prop="" label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state== 0">{{未支付}}</span>
          <span v-if="scope.row.state== 1">{{已支付}}</span>
          <span v-if="scope.row.state== 2">{{已关闭}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="item(scope.row)"
            >订单详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
   
    <el-pagination
    style="float:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
    >
    </el-pagination>
    <!-- 明细表格 -->

    <el-dialog title="订单明细" :visible.sync="dialogTableVisible">
      <el-table :data="itemList">
        <el-table-column
          property="orderId"
          label="订单编号"
        ></el-table-column>
        <el-table-column
          property="goodsName"
          label="商品名称"
        ></el-table-column>
        <el-table-column property="brand" label="品牌"></el-table-column>
        <el-table-column property="skuName" label="sku名称"></el-table-column>
        <el-table-column property="skuPrice" label="价格"></el-table-column>
        <el-table-column property="buyNum" label="购买数量"></el-table-column>
        <el-table-column property="createTime" label="下单时间"></el-table-column>
      </el-table>
    </el-dialog>




  </div>
</template>
<script>
import { search, item } from "@/api/order";
export default {
  data() {
    return {
      orderList: [],
      searchMap: {
        data: {},
        page: 1,
        limit: 5,
      },
      total: 0,
      orderId: 0,
      itemList:[],
      dialogTableVisible:false,
    };
  },
  methods: {
    search() {
      var _this = this;
      search(this.searchMap).then((res) => {
        _this.orderList = res.data;
        _this.total = res.total;
      });
    },
    item(row) {
      this.dialogTableVisible=true
      this.orderId = row.orderId;
      var _this=this;
      console.log(this.orderId)
      item(this.orderId).then((res) => {
        if (res.success) {
          this.itemList = res.data;
        }else{
          this.$message.error(res.msg);
        }
      });
    },
    handleSizeChange(size) {
      this.searchMap.limit = size;
    },
    handleCurrentChange(currentPage) {
      this.searchMap.page = currentPage;
    },
  },
  created() {
    this.search();
  },
};
</script>